// 找对象
const tbodyBox = document.querySelector('.list')
const total = document.querySelector('.total')
let studentId = 0
//初始化 Modal 并获取盒子'#modal'
const myModel = new bootstrap.Modal(document.querySelector('#modal'))


// 【 软件设计原则：开闭原则，对新增开放，对修改关闭  - 解耦 】

//=====操作数据－和服务器交互====
//1．向服务器获取学生列表数据
async function getStudentsData() {
    try {
        let res = await axios({ url: '/students' })
        return res  // {message：'',data:[{}]}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取学生数据异常，检查网络')
    }
}

//2.完成学生编辑功能，相关的数据接口需要封装5个方法
//2.1 获取省－无参
async function getProvinceData() {
    try {
        return await axios({ url: '/api/province' }) // {message：'',list:['','']}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取省份数据异常，请检查网络')
    }
}
//2.2 获取市－要传入省名称
async function getCityData(pname) {
    try {
        return await axios({ url: '/api/city?pname=' + pname }) // {message：'',list:['','']}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取市数据异常，请检查网络')
    }
}
//2.3 获取区－需传入省和市名称
async function getAreaData(pname, cname) {
    try {
        return await axios({ url: `/api/area?pname=${pname}&cname=${cname}` }) // {message：'',list:['','']}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取区数据异常，请检查网络')
    }
}
//2.4 据id获取学生的详情老数据
async function getStudentInfoData(id) {
    try {
        return await axios({ url: `/students/${id}` }) // {message：'',data:{},{}}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '获取学生详情数据异常，请检查网络')
    }

}
//2.5修改学生的详情数据
async function putStudentInfoData(id, body) {
    try {
        return await axios({ url: `/students/${id}`, method: 'PUT', data: body }) // {message：'',data:[{},{}']}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '修改学生数据异常，请检查网络')
    }

}
//2.6删除学生信息
async function deleteStudentData(id) {
    try {
        return await axios({ url: `/students/${id}`, method: 'delete' }) // {message：'',data:[{},{}']}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '删除学生数据异常，请检查网络')
    }

}
//2.7添加学生信息
async function StudentData(body) {
    try {
        return await axios({ url: '/students', method: 'POST', data: body }) // {message：'',data:[{},{}']}
    } catch (err) {
        pxmu.fail(err.response && err.response.data.message || '添加学生数据异常，请检查网络')
    }

}


//=====渲染接界面 -- 和界面交互====
// 1. 渲染学生数据到表格中
async function renderStudents() {
    let { data } = await getStudentsData()
    console.log(data)

    let str = ''
    data.forEach(item => {
        str += `
                    <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender == 0 ? '男' : '女'}</td>
                      <td>第${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province}${item.city}${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-index="${item.id}"></i></a>
                      </td>
                    </tr>
                `
    })
    tbodyBox.innerHTML = str

    //2.渲染页面中的总数
    total.innerHTML = data.length
}

// 2.渲染省，市，区三个数据到界面上
const provinceBox = document.querySelector('[name=province]')
async function renderProvince() {
    let { list } = await getProvinceData()
    let str = ''
    list.forEach(name => {
        str += `<option value="${name}">${name}</option> `
    })
    provinceBox.innerHTML = `<option value="">--省份--</option>${str} `
}

const cityBox = document.querySelector('[name=city]')
async function renderCity(pname) {
    let { list } = await getCityData(pname)
    let str = ''
    list.forEach(name => {
        str += `<option value="${name}">${name}</option> `
    })
    cityBox.innerHTML = `<option value="">--城市--</option>${str} `
}

const areaBox = document.querySelector('[name=area]')
async function renderArea(pname, cname) {
    let { list } = await getAreaData(pname, cname)
    let str = ''
    list.forEach(name => {
        str += `<option value="${name}">${name}</option> `
    })
    areaBox.innerHTML = `<option value="">--地区--</option>${str} `
}


// ====各种事件  -- 和用户交互====
// 1.弹出面板编辑事件和删除
function registerClickHanderForTbody() {
    tbodyBox.addEventListener('click', async function (e) {
        // alert('编辑')
        //编辑逻辑
        if (e.target.className == 'bi bi-pen') {
            studentId = e.target.dataset.id
            // alert(e.target.dataset.id)
            // 1. 根据id获取学生的老数据
            const { data } = await getStudentInfoData(studentId)

            //2.数据回显到页面
            //key是变量，存储遍历到的属性名或数组索引，data是要遍历的对象或数组
            for (key in data) {
                if (key == 'gender') {
                    const genderBox = document.querySelectorAll(`[name=${key}]`)
                    // console.log(genderBox)

                    genderBox[data[key]].checked = true

                } else {
                    const box = document.querySelector(`[name=${key}]`)
                    if (box) {
                        box.value = data[key]
                    }
                }

            }
            // 3. 显示用户所在的省，市，区
            let { province, city, area } = data
            // console.log(province, city, area)
            provinceBox.value = province

            await renderCity(province)
            // 回显城市
            cityBox.value = city

            await renderArea(province, city)
            areaBox.value = area


            //打开模态框
            myModel.show()
        }

        //删除逻辑
        if ((e.target.className == 'bi bi-trash')) {
            // alert('删除')
            //1.发送请求
            // const res = await axios({ url: `/students/${id}`, method: 'delete' })
            // console.log(e.target.dataset.index)
            deleteStudentData(e.target.dataset.index)
            // console.log(res)

            //2.重新渲染
            renderStudents()
        }

    })
}

// 2. 注册省份和市区select的change事件
provinceBox.addEventListener('change', function (e) {
    // alert(e.target.value)
    // 1.获取用户选择的省
    let pname = e.target.value

    //2. 调用 renderCity
    renderCity(pname)
})

cityBox.addEventListener('change', function (e) {
    // alert(e.target.value)
    // 1.获取用户选择的省
    let cname = e.target.value

    //2. 调用 renderArea
    renderArea(provinceBox.value, cname)
})

const btnSubmitBox = document.querySelector('#submit')  //添加学员确认键
const formBox = document.querySelector('#form')  //form表单数据
const btn = document.querySelector('#openModal')  //添加+号按钮
btn.addEventListener('click', function () {
    //展示模态框
    myModel.show()
})

btnSubmitBox.addEventListener('click', async function (e) {

    let body = serialize(formBox, { hash: true, empty: true })

    //发送数据之前，把当前的数据进行数据类型转换===>字符串转数字
    body.age = +body.age
    body.gender = +body.gender
    body.group = +body.group
    body.hope_salary = +body.hope_salary
    body.salary = +body.salary
    // console.log('000000', body)
    if (studentId > 0) {
        // 调用putStudentInfoData完成数据的修改
        await putStudentInfoData(studentId, body)

    } else {
        // 新增
        await StudentData(body)
    }
    //  关闭模态框
    myModel.hide()
    //重新渲染页面
    renderStudents()
    //清空输入框
    formBox.reset()
})



// ==== 页面进入时，各种方法调用初始化====
renderStudents()
registerClickHanderForTbody()
renderProvince()

